<template>
  <div class="main">
    <!-- 功能按钮 -->
    <el-row>
      <el-button
        type="success"
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        >新增</el-button
      >
    </el-row>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="firstGradeRequirement"
        label="大一要求"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="secondGradeRequirement"
        label="大二要求"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="thirdGradeRequirement"
        label="大三要求"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" align="center" width="120px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="80%"
      :before-close="handleClose"
    >
      <!-- 对话框主体部分 -->
      <el-form :model="form" ref="form">
        <el-form-item label="大一要求" :label-width="formLabelWidth">
          <el-input
            v-model="form.firstGradeRequirement"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="大二要求" :label-width="formLabelWidth">
          <el-input
            v-model="form.secondGradeRequirement"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="大三要求" :label-width="formLabelWidth">
          <el-input
            v-model="form.thirdGradeRequirement"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRequire,
  addRequire,
  updateRequire,
  delRequire,
} from "@/api/partyRequired/required";
export default {
  data() {
    return {
      // 对话框的左边距
      formLabelWidth: "120px",
      // 存放入党要求
      tableData: [],
      // 弹出框标题
      title: undefined,
      // 是否显示弹出层
      open: false,
      // 表单
      form: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      getRequire().then((res) => {
        console.log(res);
        this.tableData = [];
        this.tableData.push(res.data);
        console.log("this.tableData", this.tableData);
      });
    },
    // 表单重置
    reset() {
      this.form = {
        firstGradeRequirement: undefined,
        secondGradeRequirement: undefined,
        thirdGradeRequirement: undefined,
      };
    },
    // 关闭对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.getList();
          done();
        })
        .catch((_) => {});
    },
    // 取消对话框
    cancel() {
      this.open = false;
      this.getList();
    },
    // 新增按钮
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加入党要求";
    },
    // 删除按钮
    handleDelete(row) {
      this.$modal
        .confirm("是否确认删除各年级入党要求？")
        .then(function () {
          return delRequire(row.id);
        })
        .then(() => {
          this.getList();
        });
    },
    // 修改按钮
    handleUpdate(row) {
      this.reset();
      this.open = true;
      this.form = row;
      this.title = "修改入党要求";
    },
    /* 提交(确定)按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            updateRequire(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
            });
          } else {
            addRequire(this.form).then((res) => {
              console.log("this.form", this.form);
              this.$modal.msgSuccess("新增成功");
              this.getList();
              this.open = false;
            });
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.main {
  margin: 20px;
}
</style>